<script setup>
import {useRoute} from "vue-router";
import {getDocumentOperateMenu} from "@/utils/menu.js";
import {getDocDeptAdviceAllList, getDocMyAdviceAllList, getDocProcessAdviceAllList} from "@/api/document/advice.js";

const {proxy} = getCurrentInstance()
const listLoading = ref(false)
const loading = ref(false)
const adviceList = ref(null)
const innerRef = ref(null)
const scrollbarRef = ref(null)
const route = useRoute()
const docId = route.params && route.params.docId
const currentMenu = inject('currentMenu')
const opMenuEnum = getDocumentOperateMenu()
const prop = defineProps({
  isRefreshAdvice: {
    type: Boolean,
  }
})

onMounted(() => {
  getAdviceList()
})

watchEffect(() => {
  if (prop.isRefreshAdvice) {
    getAdviceList()
  }
})

function getAdviceList() {
  listLoading.value = true
  if (docId) {
    function handleSuccess(list) {
      adviceList.value = list
      listLoading.value = false
      nextTick(() => {
        scrollbarRef.value.setScrollTop(innerRef.value.clientHeight - 380)
      })
    }
    function handleError() {
      listLoading.value = false
    }
    if (currentMenu === opMenuEnum.my) {
      getDocMyAdviceAllList(docId)
          .then(handleSuccess)
          .catch(handleError)
    } else if (currentMenu === opMenuEnum.process){
      getDocProcessAdviceAllList(docId)
          .then(handleSuccess)
          .catch(handleError)
    } else {
      getDocDeptAdviceAllList(docId)
          .then(handleSuccess)
          .catch(handleError)
    }
  }
}

</script>

<template>
  <el-row :gutter="20" class="mb10">
    <el-col :span="24">
      <el-scrollbar v-loading="listLoading" class="customer-activity" ref="scrollbarRef" height="400px" always >
        <div ref="innerRef">
          <div v-for="item in adviceList" class="scrollbar-demo-item">
            <span class="mr5">{{ item.createTime }}</span>
            <el-tag type="primary" class="mr5">{{ item.stage }}</el-tag>
            <el-tag type="success" class="mr5">{{ item.operatorName }}</el-tag>
            <span class="content">{{ item.content }}</span>
          </div>
        </div>
      </el-scrollbar>
    </el-col>
  </el-row>

</template>

<style scoped>
.customer-activity {
  margin-bottom: 20px;
  border: #e4e7ed 1px solid;
  border-radius: 4px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 30px;
  margin: 10px;
}

</style>